<template>
	<view :class="['qn-page-' + theme]">
		<u-navbar :is-back="false" :title="goods_detail.title"><view class="back-icon ibonfont ibonfanhui" @click="back"></view></u-navbar>

		<block v-if="goods_detail.id">
			<!-- 底部菜单 -->
			<view class="footer">
				<view class="icons">
					<view class="box" @click="goPage('/pages/index/index', 'switchTab')">
						<view class="icon ibonfont ibonhome"></view>
						<view class="text">首页</view>
					</view>
					<view class="box" @tap="keep">
						<view style="font-size: 38rpx; padding-bottom: 6rpx;" class="icon ibonfont" :class="[isKeep ? 'ibonshoucang1' : 'ibonshoucang']"></view>
						<view class="text">收藏</view>
					</view>
					<view class="box" @click="goPage('/pages/cart/index', 'switchTab')">
						<view class="icon ibonfont iboncart"></view>
						<view class="text">购物车</view>
					</view>
				</view>
				<view class="btn">
					<view class="joinCart" @tap="joinCart">加入购物车</view>
					<view class="buy primary-btn" @tap="buyNow">立即购买</view>
				</view>
			</view>
			<!-- 商品主图轮播 -->
			<view class="swiper-box">
				<swiper circular="true" autoplay="true" @change="swiperChange">
					<swiper-item v-for="(item, index) in goods_detail.images" :key="index"><image :src="item" mode="aspectFit" @click="previewImage(index)"></image></swiper-item>
				</swiper>
				<view class="indicator">{{ currentSwiper + 1 }}/{{ goods_detail.images.length }}</view>
			</view>
			<!-- 标题 价格 -->
			<view class="goods-info">
				<!-- 限时秒杀倒计时 -->
				<view class="seckill-view clearfix" v-if="now_sku_data.havActivity === 5">
					<view class="float_left"><text class="ibonfont ibonshangxiangxianshimiaosha"></text></view>
					<view class="float_right">
						<text>距结束</text>
						<ul class="time-ul">
							<li class="time-li">{{ phaseTime[0] || 0 }}</li>
							<li>:</li>
							<li class="time-li">{{ phaseTime[1] || 0 }}</li>
							<li>:</li>
							<li class="time-li">{{ phaseTime[2] || 0 }}</li>
						</ul>
					</view>
				</view>
				<!-- 商品信息 -->
				<view class="goods-info-main">
					<view class="price primary-color" v-if="isShowPrice">
						<text class="rmb-icon">￥</text>
						<text v-if="now_sku_data.havActivity === 5">{{ now_sku_data.activity.activityPrice }}</text>
						<text v-else-if="now_sku_data.skuId">{{ now_sku_data.salePrice.salePrice }}</text>
						<text v-else>{{ goods_detail.minSalePrice }}</text>
					</view>
					<view class="price primary-color" v-else>请登录</view>
					<view class="origin-price" v-if="isShowPrice">￥{{ goods_detail.maxMarketPrice }}</view>
					<view class="title ellipsis">{{ goods_detail.title }}</view>
					<view class="describe ellipsis">{{ goods_detail.describe }}</view>
					<view class="clearfix goods-num">
						<view class="num-li">
							<text class="ibonfont ibonwuliu"></text>
							<text>运费：{{ goods_detail.expressFee }}</text>
						</view>
						<view class="num-li" v-if="isSalesNum === 5">
							<text class="ibonfont iboncart"></text>
							<text>销量：{{ goods_detail.salesNum }}</text>
						</view>
						<view class="num-li" v-if="stockDisplay !== 4">
							<text class="ibonfont ibonhome"></text>
							<text>库存：</text>
							<block v-if="stockDisplay === 5">
								<block v-if="now_sku_data.inventory > 0">
									<text>{{ now_sku_data.inventory > 0 ? '有货' : '无货' }}</text>
								</block>
								<block v-else>
									<text>{{ goods_detail.inventoryTotal > 0 ? '有货' : '无货' }}</text>
								</block>
							</block>
							<text v-if="stockDisplay === 6">{{ Number(now_sku_data.inventory) || goods_detail.inventoryTotal }}</text>
						</view>
					</view>
				</view>
			</view>
			<!-- 优惠券 -->
			<view class="info-box coupon-box" v-if="false">
				<view class="row">
					<view class="text">优惠券</view>
					<view class="content"><view class="coupon-li">满100减10</view></view>
					<view class="arrow"><view class="icon ibonfont ibonjinru"></view></view>
				</view>
			</view>
			<!-- 服务 -->
			<view class="info-box service-box" @click="openService" v-if="service_list.length">
				<view class="row">
					<view class="text">服务</view>
					<view class="content ellipsis">
						<view class="service-li" v-for="(item, index) in service_list" :key="index">
							<text class="ibonfont ibonyanzhengma primary-color"></text>
							<text>{{ item }}</text>
						</view>
					</view>
					<view class="arrow"><view class="icon ibonfont ibonjinru"></view></view>
				</view>
			</view>
			<!-- 活动 -->
			<view class="info-box active-box" v-if="now_sku_data.havActivity === 5">
				<view class="row">
					<view class="text">活动</view>
					<view class="content">
						<view class="ac-li">
							<view class="ac-label">限时秒杀</view>
							<view class="ac-activityTitle">{{ now_sku_data.activity.activityTitle }}</view>
							<view class="ac-value">
								每人限购
								<text class="ac-p">{{ now_sku_data.activity.limitNum }}</text>
								件，超出数量按原价计。
							</view>
							<view class="ac-value">
								仅剩
								<text class="ac-p">{{ now_sku_data.activity.activityNum - now_sku_data.activity.haveBuyNum }}</text>
								件
							</view>
						</view>
					</view>
				</view>
			</view>
			<!--规则选择 -->
			<view class="info-box spec" v-if="goods_detail.specType === 5">
				<view class="row" @click="showSpec(false)">
					<view class="text">已选</view>
					<view class="content">
						<text v-if="!now_sku_data.skuId" class="no-sel">请选择规格</text>
						<view v-else>
							<block v-for="(item, index) in now_sku_data.specGroup" :key="index">
								<text v-if="index > 0" style="padding: 0 10upx;">/</text>
								<text>{{ item.specValueName }}</text>
							</block>
						</view>
					</view>
					<view class="arrow"><view class="icon ibonfont ibonjinru"></view></view>
				</view>
			</view>
			<!-- 评价 -->
			<view class="info-box comments" id="comments" v-if="false">
				<view class="row">
					<view class="text">商品评价(102)</view>
					<view class="arrow" @tap="toRatings">
						<view class="show" @tap="showComments(goods_detail.id)">
							查看全部
							<view class="ibonfont ibonjinru"></view>
						</view>
					</view>
				</view>
				<view class="comment" @tap="toRatings">
					<view class="user-info">
						<view class="face"><image :src="comment.userface"></image></view>
						<view class="username">{{ comment.username }}</view>
					</view>
					<view class="content">{{ comment.content }}</view>
				</view>
			</view>
			<!-- 详情 -->
			<view class="description">
				<view class="title">———— 商品详情 ————</view>
				<view class="content"><rich-text :nodes="goods_detail.description"></rich-text></view>
			</view>
			<AddCardModel v-if="goods_detail.id" @close="closeaddcartPop" :isShow="show_sku" :goodsData="goods_detail" :skuId="skuId"></AddCardModel>
			<u-popup mode="bottom" v-model="share_pop">
				<view class="share-tit">分享</view>
				<view class="share-ul">
					<view class="share-li">
						<button class="share-btn" open-type="share">
							<view class="icon-view"><u-icon name="moments" top="12" color="#ffffff" size="60"></u-icon></view>
							<view class="share-btn-label">分享给好友</view>
						</button>
					</view>
					<!-- #ifdef MP-WEIXIN -->
					<!-- <view class="share-li">
					<button class="share-btn" @click="shareWxGoods">
						<view class="icon-view"><u-icon name="moments" top="12" color="#ffffff" size="60"></u-icon></view>
						<view class="share-btn-label">分享到好物圈</view>
					</button>
				</view> -->
					<!-- #endif -->
					<view class="share-li" @click="openPoster">
						<button class="share-btn">
							<view class="icon-view"><u-icon name="moments" top="12" color="#ffffff" size="60"></u-icon></view>
							<view class="share-btn-label">生成分享海报</view>
						</button>
					</view>
				</view>
				<view class="share-cancel" @click="cancelShare">取消分享</view>
			</u-popup>
			<view class="share-block" @click="share">
				<text class="ibonfont ibonfenxiang2"></text>
				<text class="text">分享</text>
			</view>
			<u-popup mode="center" v-model="poster_pop" v-if="poster_pop" width="600">
				<view class="poster-view"><poster :detail="poster_data"></poster></view>
			</u-popup>
		</block>
		<NoLoginTip :show="tip_show" @cancel="tip_show = false"></NoLoginTip>
		<u-popup mode="bottom" v-model="service_pop" border-radius="12" closeable close-icon-color="#222222">
			<view class="service-pop">
				<view class="title">商品服务</view>
				<view class="service-ul">
					<view class="service-li" v-for="(item, index) in service_list" :key="index">
						<text class="ibonfont ibonyanzhengma primary-color"></text>
						<text class="text">{{ item }}</text>
					</view>
				</view>
				<view class="primary-btn confirm-btn" @click="cancelService">确定</view>
			</view>
		</u-popup>
	</view>
</template>

<script>
import NoLoginTip from '@/components/NoLoginTip.vue';
import AddCardModel from '../../components/AddCardModel.vue';
import poster from '@/components/poster/index.vue';
export default {
	components: {
		AddCardModel,
		poster,
		NoLoginTip
	},
	computed: {
		hasLogin() {
			return this.$store.state.hasLogin;
		},
		stockDisplay() {
			const stockDisplay = this.$store.state.basicSet.stockDisplay || 6;
			return parseInt(stockDisplay);
		},
		isSalesNum() {
			const isSalesNum = this.$store.state.basicSet.isSalesNum || 5;
			return parseInt(isSalesNum);
		},
		isShowPrice() {
			const isShowPrice = this.$store.state.basicSet.goodsPrice || 5;
			if (this.$store.state.hasLogin) {
				return true;
			} else {
				return parseInt(isShowPrice) === 5;
			}
		}
	},
	data() {
		return {
			service_list: [], //商品服务列表
			service_pop: false, //商品服务
			tip_show: false,
			phaseTime: [],
			poster_data: {}, //海报数据
			poster_pop: false, //海报
			share_pop: false, //分享
			goods_id: '', // 商品ID
			goods_detail: {
				images: []
			}, // 商品信息
			show_sku: false, // 是否显示选择规格弹窗
			//控制渐变标题栏的参数
			beforeHeaderzIndex: 11, //层级
			afterHeaderzIndex: 10, //层级
			beforeHeaderOpacity: 1, //不透明度
			afterHeaderOpacity: 0, //不透明度
			//是否显示返回按钮
			// #ifndef MP
			showBack: true,
			// #endif
			//轮播图下标
			currentSwiper: 0,
			anchorlist: [], //导航条锚点
			selectAnchor: 0, //选中锚点
			serviceClass: '', //服务弹窗css类，控制开关动画
			specClass: '', //规格弹窗css类，控制开关动画
			shareClass: '', //分享弹窗css类，控制开关动画
			comment: {
				number: 102,
				userface: 'https://ae01.alicdn.com/kf/HTB1OHZrTXzqK1RjSZFvq6AB7VXaw.jpg',
				username: '大黑哥',
				content: '很不错，之前买了很多次了，很好看，能放很久，和图片色差不大，值得购买！'
			},
			isKeep: false, //收藏
			now_sku_data: {},
			skuId: 0,
			pageName: '' // 启动页标示
		};
	},
	onLoad(options) {
		// #ifdef MP-WEIXIN
		// 小程序的原生菜单中显示分享按钮
		uni.showShareMenu({
			withShareTicket: false,
			menus: ['shareAppMessage', 'shareTimeline']
		});
		// #endif
		// #ifdef MP
		//小程序隐藏返回按钮
		// this.showBack = false;
		// #endif
		this.goods_id = options.id;
		if (options.skuId) {
			this.skuId = parseInt(options.skuId) || 0;
		}
		if (options.pageName) {
			this.pageName = options.pageName;
		}
		this.getGoodsDetail();
	},
	// #ifdef MP-WEIXIN
	// 分享到朋友圈
	onShareTimeline(obj) {
		console.log('分享到朋友圈::', obj);
	},
	// 收藏小程序
	onAddToFavorites() {},
	// #endif
	methods: {
		//  获取商品详情
		getGoodsDetail() {
			this.$u.api.getGoodsDetail(this.goods_id).then(({ data }) => {
				this.goods_detail = data;
				uni.setNavigationBarTitle({
					title: data.title
				});
				this.poster_data = {
					goodsImg: data.images[0],
					goodsPrice: data.minSalePrice,
					marketPrice: data.maxMarketPrice,
					goodsName: data.title
				};
				if (data.services) {
					this.service_list = data.services.split(',');
				}
				// 当前商品是否被收藏
				this.isKeep = data.isCollect === 5;
				if (this.skuId) {
					this.now_sku_data = data.specMultiple.find(item => item.skuId === this.skuId);
					if (this.now_sku_data.havActivity === 5) {
						setInterval(() => {
							this.phaseTime = this.$u.timeFormat(this.now_sku_data.activity.endTime - new Date(), 'hh:mm:ss').split(':');
						}, 1000);
					}
				}
			});
		},
		// 立即购买
		buyNow() {
			if (!this.hasLogin) {
				this.tip_show = true;
				return;
			}
			if (this.goods_detail.specMultiple.length === 1) {
				const goodsId = this.goods_detail.id;
				const skuId = this.goods_detail.specMultiple[0].skuId;
				const activityId = 0;
				this.goPage(`/pages/order/createOrder?goodsId=${goodsId}&skuId=${skuId}&activityId=${activityId}&buyNum=1`);
			} else {
				this.showSpec();
			}
		},
		// 加入购物车
		addCart() {
			this.$u.api
				.addCart({
					goodsId: this.goods_detail.id,
					skuId: this.goods_detail.specMultiple[0].skuId,
					buyNum: 1
				})
				.then(res => {
					this.$u.toast('已加入购物车');
				});
		},
		// 关闭加入购物车弹窗
		closeaddcartPop(selSku) {
			this.now_sku_data = selSku;
			if (this.now_sku_data.havActivity === 5) {
				setInterval(() => {
					this.phaseTime = this.$u.timeFormat(this.now_sku_data.activity.endTime - new Date(), 'hh:mm:ss').split(':');
				}, 1000);
			}
			this.show_sku = false;
		},
		//规格弹窗
		showSpec(fun) {
			if (!this.hasLogin) {
				this.tip_show = true;
				return;
			}
			this.show_sku = true;
		},
		//轮播图指示器
		swiperChange(event) {
			this.currentSwiper = event.detail.current;
		},
		//消息列表
		toMsg() {
			uni.navigateTo({
				url: '../msg/msg'
			});
		},
		// 客服
		toChat() {
			uni.navigateTo({
				url: '../msg/chat/chat?name=客服008'
			});
		},
		// 分享
		share() {
			this.share_pop = true;
		},
		// 取消分享
		cancelShare() {
			this.share_pop = false;
		},
		openPoster() {
			this.poster_pop = true;
		},
		hideShare() {
			this.shareClass = 'hide';
			setTimeout(() => {
				this.shareClass = 'none';
			}, 150);
		},
		//收藏
		keep() {
			this.isKeep = this.isKeep ? false : true;
			this.$u.api.collectGoods(this.goods_id).then(res => {
				if (this.isKeep) {
					this.$u.toast('已收藏');
				} else {
					this.$u.toast('已取消收藏');
				}
				this.getGoodsDetail();
			});
		},
		// 加入购物车
		joinCart() {
			if (this.goods_detail.specMultiple.length === 1) {
				this.addCart();
			} else {
				this.showSpec();
			}
		},
		// t图片预览
		previewImage(index) {
			let urls = JSON.parse(JSON.stringify(this.goods_detail.images));
			if (index > 0) {
				urls.unshift(urls[index]);
			}
			uni.previewImage({
				urls: urls,
				longPressActions: {
					itemList: ['发送给朋友', '保存图片', '收藏'],
					success: data => {
						console.log('选中了第' + (data.tapIndex + 1) + '个按钮,第' + (data.index + 1) + '张图片');
					},
					fail: err => {
						console.log(err.errMsg);
					}
				}
			});
		},
		//商品评论
		toRatings() {
			uni.navigateTo({
				url: '/pages/goods/Ratings'
			});
		},
		back() {
			if (this.pageName) {
				this.goPage('/pages/index/index', 'switchTab');
			} else {
				uni.navigateBack();
			}
		},
		//跳转评论列表
		showComments(goodsid) {},
		// 商品服务弹窗
		cancelService() {
			this.service_pop = false;
		},
		openService() {
			this.service_pop = true;
		},
		//跳转锚点
		toAnchor(index) {
			this.selectAnchor = index;
			uni.pageScrollTo({ scrollTop: this.anchorlist[index].top, duration: 200 });
		},
		//计算锚点高度
		calcAnchor() {
			this.anchorlist = [{ name: '主图', top: 0 }, { name: '评价', top: 0 }, { name: '详情', top: 0 }];
			let commentsView = uni.createSelectorQuery().select('#comments');
			commentsView
				.boundingClientRect(data => {
					let statusbarHeight = 0;
					//APP内还要计算状态栏高度
					// #ifdef APP-PLUS
					statusbarHeight = plus.navigator.getStatusbarHeight();
					// #endif
					let headerHeight = uni.upx2px(100);
					this.anchorlist[1].top = data.top - headerHeight - statusbarHeight;
					this.anchorlist[2].top = data.bottom - headerHeight - statusbarHeight;
				})
				.exec();
		},
		// #ifdef MP-WEIXIN
		// 分享到好物圈
		shareWxGoods() {
			if (wx.navigateToMiniProgram) {
				wx.navigateToMiniProgram({
					appId: 'wxb036cafe2994d7d0',
					path: '/pages/index/index',
					extraData: {
						productInfo: {
							title: this.goods_detail.title,
							path: '/pages/goods/GoodsDetail?id=' + this.goods_id,
							thumbUrl: this.goods_detail.images[0]
						}
					}
				});
			}
		}
		// #endif
	},
	onShareAppMessage() {
		return {
			title: this.goods_detail.title,
			path: '/pages/goods/GoodsDetail?id=' + this.goods_id,
			imageUrl: this.goods_detail.images[0],
			success: res => {
				console.log(res);
			}
		};
	},
	onReady() {
		// this.calcAnchor(); //计算锚点高度，页面数据是ajax加载时，请把此行放在数据渲染完成事件中执行以保证高度计算正确
	},
	onPageScroll(e) {
		//锚点切换
		// this.selectAnchor = e.scrollTop >= this.anchorlist[2].top ? 2 : e.scrollTop >= this.anchorlist[1].top ? 1 : 0;
		//导航栏渐变
		let tmpY = 375;
		e.scrollTop = e.scrollTop > tmpY ? 375 : e.scrollTop;
		this.afterHeaderOpacity = e.scrollTop * (1 / tmpY);
		this.beforeHeaderOpacity = 1 - this.afterHeaderOpacity;
		//切换层级
		this.beforeHeaderzIndex = e.scrollTop > 0 ? 10 : 11;
		this.afterHeaderzIndex = e.scrollTop > 0 ? 11 : 10;
	}
};
</script>

<style lang="scss">
@keyframes showPopup {
	0% {
		opacity: 0;
	}
	100% {
		opacity: 1;
	}
}
@keyframes hidePopup {
	0% {
		opacity: 1;
	}
	100% {
		opacity: 0;
	}
}
@keyframes showLayer {
	0% {
		transform: translateY(0);
	}
	100% {
		transform: translateY(-100%);
	}
}
@keyframes hideLayer {
	0% {
		transform: translateY(-100%);
	}
	100% {
		transform: translateY(0);
	}
}

.icon {
	font-size: 26upx;
}
.back-icon {
	font-size: 36rpx;
	padding-left: 24rpx;
}
.swiper-box {
	background-color: #ffffff;
	position: relative;
	width: 100%;
	height: 100vw;
	swiper {
		width: 100%;
		height: 100vw;
		swiper-item {
			image {
				width: 100%;
				height: 100vw;
			}
		}
	}
	.indicator {
		display: flex;
		justify-content: center;
		align-items: center;
		padding: 0 25upx;
		height: 40upx;
		border-radius: 4upx;
		font-size: 22upx;
		position: absolute;
		bottom: 20upx;
		right: 20upx;
		color: #fff;
		background-color: rgba(0, 0, 0, 0.2);
	}
}
.info-box {
	width: 708upx;
	margin: 20upx auto 0;
	padding: 30upx 26upx;
	background-color: #fff;
	margin-bottom: 20upx;
	border-radius: 12upx;
	.row {
		width: 100%;
		display: flex;
		align-items: center;
		position: relative;
		.text {
			font-size: 24upx;
			color: #666666;
			margin-right: 24upx;
		}
		.arrow {
			position: absolute;
			right: 0;
			.icon {
				color: #afafaf;
			}
		}
	}
}

.goods-info {
	width: 708rpx;
	margin: 20rpx auto 0;
	border-radius: 12rpx;
	overflow: hidden;
	.seckill-view {
		padding: 0 20upx;
		height: 80upx;
		line-height: 80upx;
		background: linear-gradient(to right, #ff3859, #ff2d2e);
		color: #ffffff;
		.ibonshangxiangxianshimiaosha {
			font-size: 36rpx;
		}
		.float_right {
			font-size: 24upx;
			.time-ul {
				padding-left: 20upx;
				display: inline-block;
				li {
					display: inline-block;
					height: 40rpx;
					line-height: 40rpx;
					padding: 0 10rpx;
				}
				.time-li {
					width: 50upx;
					text-align: center;
					border-radius: 6upx;
					background-color: #ffffff;
					color: $uni-color-primary;
				}
			}
		}
	}
	.goods-info-main {
		padding: 30rpx 26rpx;
		background-color: #fff;
		.price {
			font-size: 36upx;
			color: $price-color;
			font-weight: bold;
			.rmb-icon {
				font-weight: 400;
				font-size: 24upx;
			}
		}
		.origin-price {
			text-decoration: line-through;
			font-size: 24upx;
			color: #999999;
			padding: 10upx 0;
		}
		.title {
			font-size: 28upx;
		}
		.describe {
			font-size: 24upx;
			color: #999999;
		}
		.goods-num {
			font-size: 22upx;
			padding-top: 20upx;
			display: flex;
			.num-li {
				flex: 3;
				text-align: center;
				.ibonfont {
					font-size: 24upx;
					margin-right: 10upx;
				}
				&:first-child {
					text-align: left;
				}
				&:last-child {
					text-align: right;
				}
			}
		}
	}
}
.spec {
	.row {
		.content {
			font-size: 24upx;
			.no-sel {
				color: #999999;
			}
		}
	}
}
.comments {
	.row {
		width: 100%;
		height: 40upx;
		display: flex;
		align-items: center;
		margin: 0 0 30upx 0;
		.text {
			font-size: 30upx;
		}
		.arrow {
			font-size: 28upx;
			position: absolute;
			right: 4%;
			color: #ccc;
			.show {
				display: flex;
				align-items: center;
				.ibonfont {
					color: #999999;
				}
			}
		}
	}
	.comment {
		width: 100%;
		.user-info {
			width: 100%;
			height: 40upx;
			display: flex;
			align-items: center;
			.face {
				width: 40upx;
				height: 40upx;
				margin-right: 8upx;
				image {
					width: 40upx;
					height: 40upx;
					border-radius: 100%;
				}
			}
			.username {
				font-size: 24upx;
				color: #999;
			}
		}
		.content {
			margin-top: 10upx;
			font-size: 26upx;
		}
	}
}
.description {
	padding-bottom: 100upx;
	.title {
		width: 100%;
		height: 80upx;
		display: flex;
		justify-content: center;
		align-items: center;
		font-size: 26upx;
		color: #999;
	}
}
.footer {
	position: fixed;
	bottom: 0upx;
	width: 100%;
	padding-right: 22upx;
	padding-top: 20upx;
	padding-bottom: 20upx;
	border-top: solid 1upx #eee;
	background-color: #fff;
	z-index: 2;
	display: flex;
	justify-content: space-between;
	align-items: center;
	.icons {
		height: 80upx;
		.box {
			width: 93upx;
			height: 64upx;
			display: inline-block;
			text-align: center;
			border-right: 1upx solid #f4f4f4;
			.icon {
				font-size: 40upx;
				color: #333333;
			}
			.ibonshoucang1 {
				color: $uni-color-primary;
			}
			.text {
				display: flex;
				justify-content: center;
				width: 100%;
				font-size: 22upx;
				color: #666;
			}
			&:last-child {
				border-right: 0 none;
			}
		}
	}
	.btn {
		overflow: hidden;
		.joinCart,
		.buy {
			border-radius: 10upx;
			margin-left: 16upx;
			height: 74upx;
			width: 204upx;
			color: #fff;
			display: inline-block;
			line-height: 74upx;
			text-align: center;
			font-size: 28upx;
		}
		.joinCart {
			background: linear-gradient(to right, #ff722b, #ff722b);
		}
		.buy {
			background-color: #fe4543;
		}
	}
}
.popup {
	position: fixed;
	top: 0;
	width: 100%;
	height: 100%;
	z-index: 20;
	display: none;
	.mask {
		position: fixed;
		top: 0;
		width: 100%;
		height: 100%;
		z-index: 21;
		background-color: rgba(0, 0, 0, 0.6);
	}
	.layer {
		position: fixed;
		z-index: 22;
		bottom: -70%;
		width: 100%;
		padding: 0 4%;
		height: 70%;
		border-radius: 20upx 20upx 0 0;
		background-color: #fff;
		display: flex;
		flex-wrap: wrap;
		align-content: space-between;
		.content {
			width: 100%;
			padding: 20upx 0;
		}
		.btn {
			width: 100%;
			height: 100upx;
			.button {
				width: 100%;
				height: 80upx;
				border-radius: 40upx;
				color: #fff;
				display: flex;
				align-items: center;
				justify-content: center;
				background-color: #f47952;
				font-size: 28upx;
			}
		}
	}

	&.show {
		display: block;
		.mask {
			animation: showPopup 0.2s linear both;
		}
		.layer {
			animation: showLayer 0.2s linear both;
		}
	}
	&.hide {
		display: block;
		.mask {
			animation: hidePopup 0.2s linear both;
		}

		.layer {
			animation: hideLayer 0.2s linear both;
		}
	}
	&.none {
		display: none;
	}
	&.service {
		.row {
			margin: 30upx 0;
			.title {
				font-size: 30upx;
				margin: 10upx 0;
			}
			.description {
				font-size: 28upx;
				color: #999;
			}
		}
	}
	&.spec {
		.title {
			font-size: 30upx;
			margin: 30upx 0;
		}
		.sp {
			display: flex;
			view {
				font-size: 28upx;
				padding: 5upx 20upx;
				border-radius: 8upx;
				margin: 0 30upx 20upx 0;
				background-color: #f6f6f6;
				&.on {
					padding: 3upx 18upx;
					border: solid 1upx #f47925;
				}
			}
		}
		.length {
			margin-top: 30upx;
			border-top: solid 1upx #aaa;
			display: flex;
			justify-content: space-between;
			align-items: center;
			padding-top: 20upx;
			.text {
				font-size: 30upx;
			}
			.number {
				display: flex;
				justify-content: center;
				align-items: center;
				.input {
					width: 80upx;
					height: 60upx;
					margin: 0 10upx;
					background-color: #f3f3f3;
					display: flex;
					justify-content: center;
					align-items: center;
					text-align: center;
					input {
						width: 80upx;
						height: 60upx;
						display: flex;
						justify-content: center;
						align-items: center;
						text-align: center;
						font-size: 26upx;
					}
				}

				.sub,
				.add {
					width: 60upx;
					height: 60upx;
					background-color: #f3f3f3;
					border-radius: 5upx;
					.icon {
						font-size: 30upx;
						width: 60upx;
						height: 60upx;
						display: flex;
						justify-content: center;
						align-items: center;
					}
				}
			}
		}
	}
}
.share {
	display: none;
	&.show {
		display: block;
		.mask {
			animation: showPopup 0.15s linear both;
		}
		.layer {
			animation: showLayer 0.15s linear both;
		}
	}
	&.hide {
		display: block;
		.mask {
			animation: hidePopup 0.15s linear both;
		}

		.layer {
			animation: hideLayer 0.15s linear both;
		}
	}
	&.none {
		display: none;
	}
	.mask {
		background-color: rgba(0, 0, 0, 0.5);
		position: fixed;
		width: 100%;
		height: 100%;
		top: 0;
		z-index: 11;
	}
	.layer {
		width: 92%;
		position: fixed;
		z-index: 12;
		padding: 0 4%;
		top: 100%;
		background-color: rgba(255, 255, 255, 0.9);
		.list {
			width: 100%;
			display: flex;
			padding: 10upx 0 30upx 0;
			.box {
				width: 25%;
				display: flex;
				justify-content: center;
				flex-wrap: wrap;
				image {
					width: 13.8vw;
					height: 13.8vw;
				}
				.title {
					margin-top: 10upx;
					display: flex;
					justify-content: center;
					width: 100%;
					font-size: 26upx;
				}
			}
		}
		.btn {
			width: 100%;
			height: 100upx;
			display: flex;
			justify-content: center;
			align-items: center;
			font-size: 28upx;
			border-top: solid 1upx #666666;
		}
		.h1 {
			width: 100%;
			height: 80upx;
			display: flex;
			justify-content: center;
			align-items: center;
			font-size: 34upx;
		}
	}
}
.coupon-box {
	.row {
		.content {
			.coupon-li {
				display: inline-block;
				width: 120upx;
				background-color: $price-color;
				color: #ffffff;
				line-height: 30upx;
				font-size: 18upx;
				text-align: center;
			}
		}
	}
}
.active-box {
	.row {
		.text {
			width: 80rpx;
		}
		.content {
			.ac-li {
				margin-bottom: 10upx;
				.ac-label {
					display: inline-block;
					min-width: 62upx;
					padding: 0 10rpx;
					height: 32upx;
					line-height: 32upx;
					text-align: center;
					color: #fca41f;
					font-size: 20upx;
					border-radius: 4upx;
					background-color: #fff6e7;
				}
				.ac-activityTitle {
					display: inline-block;
					padding-left: 14upx;
					font-size: 24upx;
				}
				.ac-value {
					font-size: 24upx;
					padding-top: 10rpx;
					.ac-p {
						color: $price-color;
					}
				}
			}
		}
	}
}
.share-tit {
	line-height: 80upx;
	text-align: center;
	font-size: 32upx;
}
.share-cancel {
	line-height: 80upx;
	text-align: center;
	font-size: 28upx;
	border-top: 1px solid #f4f4f4;
}
.share-ul {
	display: flex;
	padding: 50upx 0;
	.share-li {
		flex: 3;
		.share-btn {
			background-color: #ffffff;
			font-size: 26upx;
			&::after {
				border: 0 none;
			}
			.icon-view {
				display: inline-block;
				width: 100upx;
				height: 100upx;
				border-radius: 100%;
				background-color: #18b566;
				line-height: 100upx;
				text-align: center;
				margin-bottom: 10upx;
			}
		}
	}
}
.share-block {
	line-height: 50upx;
	font-size: 24upx;
	height: 50upx;
	background-color: rgba(0, 0, 0, 0.6);
	color: #ffffff;
	text-align: right;
	position: fixed;
	right: 0;
	bottom: 220rpx;
	padding-right: 12upx;
	padding-left: 24upx;
	border-top-left-radius: 26upx;
	border-bottom-left-radius: 26upx;
	.ibonfont {
		font-size: 26upx;
		margin-right: 6upx;
	}
}
.poster-view {
	// width: 600upx;
	// margin: 0 auto;
}
.service-box {
	.content {
		width: 560rpx;
		-webkit-line-clamp: 1;
		.service-li {
			display: inline-block;
			color: #666666;
			font-size: 24rpx;
			margin-right: 30rpx;
			.ibonfont {
				margin-right: 10rpx;
				font-size: 24rpx;
				color: $uni-color-primary;
			}
		}
	}
}
.service-pop {
	padding-bottom: 30rpx;
	.title {
		line-height: 100rpx;
		height: 100rpx;
		font-size: 32rpx;
		text-align: center;
		color: #222;
	}
	.service-ul {
		padding: 0 30rpx;
		height: 430rpx;
		overflow-y: auto;
		width: 100%;
		.service-li {
			font-size: 28rpx;
			line-height: 100rpx;
			height: 100rpx;
			.ibonfont {
				font-size: 30rpx;
				color: $uni-color-primary;
				margin-right: 20rpx;
			}
		}
	}
	.confirm-btn {
		height: 70rpx;
		line-height: 70rpx;
		text-align: center;
		border-radius: 10rpx;
		color: #ffffff;
		background-color: $uni-color-primary;
		width: 600rpx;
		margin: 30rpx auto 0;
	}
}
</style>
